<template>
	<view>
		<view class="timebox">
			<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
		</view>
		<view class="namebox">
			<view class="itemname">时间</view>
			<view class="itemname">订单数</view>
			<view class="itemname">订单金额</view>
			<view class="itemname" style="border: none;">支付金额</view>
		</view>
		<view class="namebox" :style="{'border-bottom':index==6?'solid 2rpx #ECECEC':''}" v-for="(item,index) in 7" :key="index">
			<view class="itemname">2024-06-03</view>
			<view class="itemname">23</view>
			<view class="itemname">2097</view>
			<view class="itemname" style="border: none;">2097</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range: [],
			}
		},
		methods: {
			maskClick(e) {
				console.log('maskClick事件:', e);
			}
		}
	}
</script>
<style lang="scss" scoped>
	.timebox{
		width: 700rpx;
		margin:20rpx auto;
	}
	.namebox{
		display: flex;
		align-items: center;
		border-top: solid 2rpx #ECECEC;
		height: 60rpx;
		// margin-top: 20rpx;
		.itemname{
			width: 24.5%;
			text-align: center;
			color: #222;
			height: 60rpx;
			font-size: 28rpx;
			border-right: solid 2rpx #ECECEC;
			line-height: 60rpx;
		}
	}
</style>